<template>
  <MainLayout>
    <div
      v-if="$profileStore.name"
      class="pt-[90px] 2xl:pl-[185px] lg:pl-[160px] lg:pr-0 pr-2 w-[calc(100%-90px)] max-w-[1800px] 2xl:mx-auto overflow-x-hidden"
    >
      <div class="flex w-[calc(100vw-230px)]">
        <img
          class="max-w-[120px] rounded-full"
          :src="$profileStore.image"
        >
        <div class="ml-5 w-full">
          <div class="text-[30px] font-bold truncate">
            {{ $profileStore.name |allLowerCaseNoCaps}}
          </div>
          <div class="text-[18px] truncate">
            {{ $profileStore.name }}
          </div>
          <button
            v-if="$profileStore.id === $userStore.id"
            @click="$store.commit('general/change_isEditProfileOpen',true)"
            class="flex item-center rounded-md py-1.5 px-3.5 mt-3 text-[15px] font-semibold border hover:bg-gray-100"
          >
            <Icon class=" mr-1.5" name="icon-bianji" size="16" style="margin-top: 0.2rem"/>
            <div>Edit profile</div>
          </button>

          <button v-else
                  class="flex item-center rounded-md py-1.5 px-8 mt-3 text-[15px] text-white font-semibold bg-[#F02C56]"
          >
            Follow
          </button>
        </div>
      </div>

      <div class="flex items-center pt-4">
        <div class="mr-4">
          <span class="font-bold">10K</span>
          <span class="text-gray-500 font-light text-[15px] pl-1.5">Following</span>
        </div>
        <div class="mr-4">
          <span class="font-bold">44K</span>
          <span class="text-gray-500 font-light text-[15px] pl-1.5">Followers</span>
        </div>
        <div class="mr-4">
          <span class="font-bold">{{ $profileStore.allLikes }}</span>
          <span class="text-gray-500 font-light text-[15px] pl-1.5">Likes</span>
        </div>
      </div>

      <div class="pt-4 mr-4 text-gray-500 font-light text-[15px] pl-1.5 max-w-[500px]">
        {{ $profileStore.bio }}
      </div>

      <div class="w-full flex items-center pt-4 border-b">
        <div class="w-60 text-center py-2 text-[17px] font-semibold border-b-2 border-b-black">Videos</div>
        <div class="w-60 text-gray-500 text-center py-2 text-[17px] font-semibold">
          <Icon name="icon-jiesuo" style="display: inline"/>
          Liked
        </div>
      </div>

      <div class="mt-4 grid 2xl:grid-cols-6 xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-3">
        <div v-if="show" v-for="(post,index) in $profileStore.posts" :key="index">
          <PostUser :post="post"/>
        </div>
      </div>
    </div>
  </MainLayout>

</template>

<script>
import MainLayout from '~/layouts/MainLayout.vue';

export default {
  components: {MainLayout},
  data() {
    return {
      show: false
    }
  },
  middleware: ['auth'],
  filters:{
    allLowerCaseNoCaps(str) {
      return str.split(' ').join('').toLowerCase()
    },
  },
  computed: {
    $profileStore() {
      return this.$store.state.profile
    },
    $userStore() {
      return this.$store.state.user
    }
  },
  async mounted() {
    try {
      await this.$store.dispatch('profile/getProfile', this.$route.params.id)
    } catch (error) {
      console.log(error)
    }
  },
  watch: {
    '$profileStore.posts':{
      handler(){
        setTimeout(() => this.show = true, 300)
      }
    }
  }
}
</script>
